<template>
  <div class="goods-item" @click="itemClick">
    <!-- <a :href="goodsitem.link" > -->
    <a href="javascript:;">
      <!-- <img :src="showImage" alt="" @load="imageLoad" /> -->
      <img v-lazy="showImage" alt="" @load="imageLoad" />
      <p>{{ goodsitem.title }}</p>
      <p>
        <span>{{ goodsitem.price }}</span> <span>{{ goodsitem.cfav }}</span>
      </p></a
    >
  </div>
</template>

<script>
export default {
  props: {
    goodsitem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    showImage() {
      // return this.goodsitem.show.img
      //   ? this.goodsitem.show.img
      //   : this.goodsitem.image;
      // return this.goodsitem.show.img || this.goodsitem.image;
      //上面的顺序不对，要先判断层数最浅的，能返回undefined。就是没有属性和没有值的区别,js不能跨层找，show都没找到，就去找image了
      return this.goodsitem.image || this.goodsitem.show.img;
    },
  },
  methods: {
    imageLoad() {
      // console.log(this.$route.path);
      // this.$bus.$emit("imageLoad");
      //路由监听，只向有效页面发送load，如home等需要加载推荐的页面，详情页不需要加载，提高性能。这里加载是为了配合详情页的$nextTick刷新
      if (this.$route.path === "/home") {
        this.$bus.$emit("imageLoad");
      } else if (this.$route.path.substr(0,7) === '/detail') {
        this.$bus.$emit("detailLoad");
      }
    },
    itemClick() {
      //需要返回，不用replace
      this.$router.push("/detail/" + this.goodsitem.iid);
    },
  },
};
</script>

<style>
.goods-item {
  /* flex: 1; */
  width: 50%;
}
.goods-item img {
  display: block;
  margin: 0 auto;
  border-radius: 5px;
  height: 250px;
  width: 95%;
}
.goods-item p {
  margin: 5px auto;
  width: 90%;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goods-item span:nth-child(1) {
  color: red;
}
.goods-item span:nth-child(2) {
  position: relative;
}
.goods-item span {
  padding: 0 20px;
}
.goods-item span:nth-child(2)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>